<form class="modal">
  <span class="close">X</span>
      <div class="content">
        <span class="title">Upload a File</span>
        <p class="message">Select a file to upload from your computer or device.</p>
        
        <div class="actions">
          <label for="file" class="button upload-btn">Choose File
            <input hidden="" type="file" id="file">
          </label>
        </div>
        <div class="result">
           <div class="file-uploaded"><p>profile_pic.png</p></div>
        </div>
  </div>
</form>
<style>
/* From Uiverse.io by Yaya12085 - Tags: form */
.modal {
  background-color: rgb(255, 255, 255);
  border-radius: 1em;
  box-shadow: 0px 100px 48px -60px rgba(0,0,0,0.1);
  color: rgb(15, 14, 14);
  max-width: 330px;
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}

.content > *, .modal > * {
  padding: 0.875em;
}

.title {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  justify-content: center;
}

.message {
  line-height: 1.2;
  text-align: center;
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.upload-btn {
  background-color: transparent;
  border: 0.125rem dashed hsla(223,10%,50%,0.4);
  flex: 1;
  padding: 0.375rem 2rem;
}

.upload-btn:hover {
  background-color: hsla(223,10%,60%,0.2);
}

.close {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(226, 94, 54);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: 10px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.result {
  margin-top: 4px;
  background-color: rgba(0, 140, 255, 0.062);
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 1em;
}

.file-uploaded {
  font-weight: 300;
}

.file-uploaded::before {
  position: absolute;
  content: "X";
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(26, 7, 1, 0.212);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  right: 10px;
  top: 10px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  cursor: pointer;
}

.file-uploaded:hover::before {
  background-color: rgba(233, 40, 6, 0.664);
}
</style>
